import React, { useState, useEffect } from "react";
import "./index.css";
import logo from "../../../assets/icon/login_img.png";
import { Form, Input, Button, Divider, Toast } from "antd-mobile";
import mail from "../../../assets/icon/login_icon_mail_n.png";
import lock from "../../../assets/icon/login_icon_lock_n.png";
import hide from "../../../assets/icon/login_icon_hide_password_n.png";
import show from "../../../assets/icon/login_icon_show_password.png";
import code from "../../../assets/icon/register_icon_verification_code_n.png";
import back from "../../../assets/icon/back.png";
import LoginCss from "../../../components/pages/User/LoginCss";

// RSA加密
import { JSEncrypt } from "jsencrypt";
import { useAppDispatch } from "../../../store";
import {
  userEmailCode,
  userRegister,
} from "../../../store/sliceReducer/UserSliceReudcer";
import { useNavigate } from "react-router-dom";

export const publicKey = `MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCuQd3gESx7VdIyRYUWjmjg61VIgUK6F45hClmqUMZ7xNiT5rlLM6e78osMvBF/yP7cVm7pK+NMCDWoVS1/AETpxJYqUlIC77ZAU8/MnP96IupnJL87vqhPcpdv7+VqLM38ls++yuD/F/HSoOQTv/leJh+dgE/4EYAJjOWFAbYfXwIDAQAB`;

export const encryptedData = (publicKey: string, data: string) => {
  // 新建JSEncrypt对象
  const encryptor = new JSEncrypt();
  // 设置公钥
  encryptor.setPublicKey(publicKey); // publicKey为公钥
  // 加密数据
  return encryptor.encrypt(data); //data就是需要加密的密码
};

const Index: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const [visible, setVisible] = useState(false);
  const [visibla, setVisibla] = useState(false);
  const [form] = Form.useForm();
  const [users, setUsers] = useState({
    email: "",
    code: "",
    pwd1: "",
    pwd2: "",
    invitationCode: "",
  });
  const [timeText, setTimeText] = useState<number>(50);
  const [flag, setfalg] = useState(false);
  // 验证码
  const getEmailCode = () => {
    if (users.email) {
      let time = 50;
      setfalg(true);
      const timer = setInterval(() => {
        time -= 10;
        setTimeText(time);

        if (time <= 0) {
          setTimeText(5);
          setfalg(false);
          // 获取验证码
          dispatch(userEmailCode(users.email));
          clearInterval(timer);
        }
      }, 1000);
    } else {
      Toast.show({
        content: "输入不能为空",
        afterClose: () => {
          console.log("after");
        },
      });
    }
  };
  // 提交
  const onSubmit = () => {
    const pwda = encryptedData(publicKey, users.pwd1);
    // console.log(pwda);
    Object.assign(users, {
      pwd1: pwda,
      pwd2: pwda,
    });
    dispatch(userRegister(users));
  };

  return (
    <div className="user_login_box">
      <div className="toHome">
        <img src={back} alt="" onClick={() => navigate(-1)} />
      </div>
      <div className="img_box">
        <img src={logo} alt="" />
      </div>
      <div className="loginmiddlw">
        <LoginCss>
          <div className="content">
            <Form
              layout="horizontal"
              form={form}
              onFinish={onSubmit}
              footer={
                <Button block color="primary" type="submit" size="large">
                  注册
                </Button>
              }
            >
              {/* 邮箱 */}
              <Form.Item
                extra={
                  <div>
                    <Button
                      size="mini"
                      color="primary"
                      disabled={flag}
                      onClick={getEmailCode}
                    >
                      {flag ? timeText + "s" : "获取验证码"}
                    </Button>
                  </div>
                }
              >
                <div className="icon">
                  <img src={mail} className="mailimg" alt="" />
                </div>
                <Input
                  onChange={(e) =>
                    setUsers({
                      ...users,
                      email: e,
                    })
                  }
                  placeholder="请输入邮箱"
                />
              </Form.Item>
              {/* 验证码 */}
              <Form.Item>
                <div className="icon">
                  <img src={code} className="codeimg" alt="" />
                </div>
                <Input
                  onChange={(e) =>
                    setUsers({
                      ...users,
                      code: e,
                    })
                  }
                  placeholder="请输入验证码"
                />
              </Form.Item>
              {/* 密码 */}
              <Form.Item
                extra={
                  <div>
                    {visible ? (
                      <img
                        src={show}
                        style={{ width: "30px", height: "24px" }}
                        onClick={() => setVisible(false)}
                        alt=""
                      />
                    ) : (
                      <img
                        src={hide}
                        style={{ marginRight: "3px" }}
                        onClick={() => setVisible(true)}
                        alt=""
                      />
                    )}
                  </div>
                }
              >
                <div className="icon">
                  <img src={lock} className="lockimg" alt="" />
                </div>
                <Input
                  onChange={(e) =>
                    setUsers({
                      ...users,
                      pwd1: e,
                    })
                  }
                  placeholder="请输入密码"
                  type={visible ? "text" : "password"}
                />
              </Form.Item>
              {/* 再次输入密码 */}
              <Form.Item
                extra={
                  <div>
                    {visibla ? (
                      <img
                        src={show}
                        style={{ width: "30px", height: "24px" }}
                        onClick={() => setVisibla(false)}
                        alt=""
                      />
                    ) : (
                      <img
                        src={hide}
                        style={{ marginRight: "3px" }}
                        onClick={() => setVisibla(true)}
                        alt=""
                      />
                    )}
                  </div>
                }
              >
                <div className="icon">
                  <img src={lock} className="lockimg" alt="" />
                </div>
                <Input
                  onChange={(e) =>
                    setUsers({
                      ...users,
                      pwd2: e,
                    })
                  }
                  placeholder="请输入密码"
                  type={visibla ? "text" : "password"}
                />
              </Form.Item>
              {/*邀请码 */}
              <Form.Item extra={<div>选填</div>}>
                <div className="icon">
                  <img src={lock} className="lockimg" alt="" />
                </div>
                <Input
                  onChange={(e) =>
                    setUsers({
                      ...users,
                      invitationCode: e,
                    })
                  }
                  placeholder="请输入密码"
                  type={visible ? "text" : "password"}
                />
              </Form.Item>
            </Form>
          </div>
        </LoginCss>
      </div>
    </div>
  );
};

export default Index;
